<template>
    <div class="loginWaip">
        <el-dialog v-model="dialogVisible" width="30%" class="diagFlag">
            <div>

                <template v-if="!FindpassWord">
                    <div v-if="islogin && noRegist">

                        <div class="title">登录</div>
                        <div class="tips">提供有效登录账号</div>
                        <el-divider></el-divider>

                        <el-form ref="form" :model="form" class="formWaip" :rules="rules">
                            <el-form-item prop="phone">
                                <el-input
                                        v-model="form.phone"
                                        placeholder="邮箱或手机号"
                                ></el-input>
                            </el-form-item>
                            <el-form-item prop="password">
                                <el-input v-model="form.password" placeholder="密码" :type="type">
                                    <template #suffix>
                                        <i :class="['iconfont ',type == 'password' ? 'icon-eye-close' : 'icon-eye-open',]" @click="show()"></i>
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button plain style="width: 100%" :type="loginAll ? 'primary' : 'loginBtn'" @click="submitForm">登录</el-button>
                            </el-form-item>
                        </el-form>

                        <div class="reBtn">
                            <span @click="findPass">找回密码</span>
                            <el-divider direction="vertical"></el-divider>
                            <span @click="logOre">注册</span>
                        </div>

                    </div>
                    <div v-else>

                        <div class="title">注册</div>
                        <div class="tips">注册账号开始使用</div>
                        <el-divider></el-divider>

                        <el-form
                                ref="registerFrom"
                                :model="registerFrom"
                                class="formWaip"
                                :rules="registerRules"
                        >
                            <el-form-item prop="username">
                                <el-input
                                        v-model="registerFrom.username"
                                        placeholder="用户名"
                                ></el-input>
                            </el-form-item>
                            <el-form-item prop="phone">
                                <el-input
                                        v-model="registerFrom.phone"
                                        placeholder="手机号"
                                ></el-input>
                            </el-form-item>
                            <el-form-item class="disflex">
                                <el-input
                                        v-model="registerFrom.code"
                                        placeholder="手机验证码"
                                        autocomplete="off"
                                ></el-input>
                                <el-button
                                        plain
                                        style="width: 100%"
                                        type="submit"
                                        @click="sendCode"
                                >{{ codeMsg }}
                                </el-button
                                >
                            </el-form-item>
                            <el-form-item>
                                <el-input
                                        v-model="registerFrom.password"
                                        placeholder="密码"
                                        :type="type"
                                >
                                    <template #suffix>
                                        <i
                                                :class="[
                      'iconfont ',
                      type == 'password' ? 'icon-eye-close' : 'icon-eye-open',
                    ]"
                                                @click="show()"
                                        ></i>
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button
                                        plain
                                        style="width: 100%"
                                        :type="registerAll ? 'primary' : 'loginBtn'"
                                        @click="register"
                                >注册
                                </el-button
                                >
                            </el-form-item>
                            <el-form-item class="consent">
                                <el-checkbox v-model="agree"></el-checkbox>
                                <span
                                >我已阅读并接受<a href="#">《版权声明》</a>和<a href="#"
                                >《隐私保护》</a
                                ></span
                                >
                            </el-form-item>
                        </el-form>

                        <div class="reBtn">
                            <!--            <span>已有账号，</span>-->
                            <!--            <span @click="logOre" style="color: #ff4444">直接登录</span>-->
                        </div>

                    </div>
                </template>

                <template v-else>
                    <div class="findPassCheck" v-if="FindpassWordCheck">
                        <div class="title">找回密码</div>
                        <el-divider></el-divider>

                        <el-form
                                ref="findPassCheckForm"
                                :model="findPassCheckForm"
                                class="formWaip"
                        >

                            <el-form-item prop="phone" :rules="registerRules.phone">
                                <el-input
                                        v-model="findPassCheckForm.phone"
                                        placeholder="手机号"
                                ></el-input>
                            </el-form-item>


                            <el-form-item class="disflex" style="margin-bottom: 50px;">
                                <el-input
                                        v-model="findPassCheckForm.code"
                                        placeholder="手机验证码"
                                        autocomplete="off"
                                ></el-input>
                                <el-button
                                        plain
                                        style="width: 100%"
                                        type="submit"
                                        @click="sendCodeFindPass"
                                >{{ codeMsg }}
                                </el-button
                                >

                            </el-form-item>

                            <el-form-item>
                                <el-button @click.stop="findPassVaildate">验证</el-button>
                            </el-form-item>

                            <div style="height: 30px;" class="block">

                            </div>

                        </el-form>

                    </div>
                    <div class="findPass" v-else>
                        <div class="title">找回密码</div>
                        <el-divider></el-divider>
                        <el-form
                                ref="findPassForm"
                                :model="findPassForm"
                                class="formWaip"
                                label-width="80px"
                        >

                            <el-form-item label="新密码" prop="newpass">
                                <el-input v-model="findPassForm.newpass" show-password></el-input>
                            </el-form-item>

                            <el-form-item label="确认密码" prop="newpassconfirm">
                                <el-input v-model="findPassForm.newpassconfirm" show-password></el-input>
                            </el-form-item>

                            <el-button @click.stop="changePassword">修改</el-button>

                        </el-form>
                    </div>
                </template>

            </div>
        </el-dialog>
    </div>
</template>
<script>
    import {UserReg, Login, UserInfoDetail, ResetPassword} from "@/api/UserInfo";
    import {SendSms, CheckPhoneCode} from "@/api/Certification";
    import {setUserInfo} from "@/utils/auth";
    import {validUserphone} from '@/utils/validate'

    export default {
        props: {
            islogin: {
                type: Boolean,
            },
        },
        created(){

        },
        data() {
            return {
                dialogVisible: false,
                title: "登录",
                tips: "提供有效登录账号",
                form: {},
                type: "password",
                loginFlag: false,
                agree: false,
                codeMsg: "发送验证码",
                totalTime: 60,
                registerFrom: {},
                findPassCheckForm: {},
                canClick: true,
                registerRules: {
                    username: [
                        {
                            required: true,
                            message: "请输入用户名",
                            trigger: "blur",
                        },
                    ],
                    phone: [
                        {
                            required: true,
                            message: "请输入正确的手机号",
                            trigger: "blur",
                            pattern: /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/
                        },
                    ],
                },
                rules: {
                    phone: [
                        {
                            required: true,
                            message: "请输入正确的手机号",
                            trigger: "blur",
                            pattern: /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/
                        },
                    ],
                    password: [
                        {
                            required: true,
                            message: "请输入密码",
                            trigger: "blur",
                        },
                    ],
                },
                registerAll: false,
                loginAll: false,
                FindpassWord: false,
                FindpassWordCheck: true,
                findPassForm: {},
                codeMsg2: '',
                noRegist:true,
            };
        },
        computed: {},
        watch: {
            registerFrom: {
                handler(val) {
                    if (
                        this.registerFrom.username &&
                        this.registerFrom.password &&
                        this.registerFrom.phone
                    )
                        this.registerAll = true;
                    else this.registerAll = false;
                },
                deep: true,
            },
            form: {
                handler(val) {
                    if (this.form.password && this.form.phone) this.loginAll = true;
                    else this.loginAll = false;
                },
                deep: true,
            },
            dialogVisible(nv) {
                if (!nv)
                    this.resetForm()
                this.loginFlag = true
            },
        },
        methods: {
            show() {
                this.type = this.type == "password" ? "text" : "password";
            },
            logOre() {
                this.loginFlag = !this.loginFlag;
                this.title = this.loginFlag ? "登录" : "注册";
                this.tips = this.loginFlag ? "提供有效登录账号" : "注册账号开始使用";
                this.type = "password";
                this.noRegist=false;
            },
            sendCode() {
                if (!this.registerFrom.phone) {
                    this.$message.warning("请输入电话号码");
                    return false;
                }

                if (!this.canClick) return false;
                this.canClick = false;
                SendSms({receive: this.registerFrom.phone}).then((res) => {
                    if (res.data.value.code == 200) {
                        this.$message.success("短信发送成功");
                        this.codeMsg = this.totalTime + "s";
                        let clock = setInterval(() => {
                            this.totalTime--;
                            this.codeMsg = this.totalTime + "s";
                            if (this.totalTime < 0) {
                                window.clearInterval(clock);
                                this.codeMsg = "重新发送";
                                this.totalTime = 60;
                                this.canClick = true;
                            }
                        }, 1000);
                    } else {
                        this.canClick = true;
                        this.$message.error(res.data.value.msg);
                    }
                });
            },

            sendCodeFindPass() {
                if (!this.findPassCheckForm.phone) {
                    this.$message.warning("请输入电话号码");
                    return false;
                }

                if (!this.canClick) return false;
                this.canClick = false;
                SendSms({receive: this.findPassCheckForm.phone}).then((res) => {
                    if (res.data.value.code == 200) {
                        this.$message.success("短信发送成功");
                        this.codeMsg = this.totalTime + "s";
                        let clock = setInterval(() => {
                            this.totalTime--;
                            this.codeMsg = this.totalTime + "s";
                            if (this.totalTime < 0) {
                                window.clearInterval(clock);
                                this.codeMsg = "重新发送";
                                this.totalTime = 60;
                                this.canClick = true;
                            }
                        }, 1000);
                    } else {
                        this.canClick = true;
                        this.$message.error(res.data.value.msg);
                    }
                });
            },
            findPassVaildate() {
                //  findPassCheckForm
                this.$refs["findPassCheckForm"].validate((valid) => {
                    if (valid) {


                        CheckPhoneCode({
                            receive: this.findPassCheckForm.phone,
                            code: this.findPassCheckForm.code,
                        }).then((res) => {
                            if (res.code == 0) {

                                // UserReg(this.registerFrom).then((res) => {
                                //   if (res.code == 0) {
                                //     this.$message.success("注册成功");
                                //     // setUserInfo(this.registerFrom);
                                //     // this.$store.commit("setUser", this.registerFrom);
                                //     setTimeout(() => {
                                //       window.location.reload();
                                //     }, 1000);
                                //   } else {
                                //     this.$message.error(res.data);
                                //   }
                                // });

                                this.FindpassWordCheck = false

                            } else {
                                this.$message.error(res.data);
                            }
                        });


                    } else {
                        console.log("error submit!!");
                        return false;
                    }
                });
            },

            submitForm() {
                this.$refs["form"].validate((valid) => {
                    if (valid) {

                        Login(this.form).then((res) => {
                            if (res.code == 0) {
                                this.$message.success("登录成功");
                                UserInfoDetail().then((res1) => {
                                    setUserInfo(res1.data);
                                    this.$store.commit("setUser", res1.data);
                                    console.log('用户信息', res1.data)
                                    setTimeout(() => {
                                        window.location.reload();
                                    }, 500);
                                });
                            } else {
                                this.$message.error(res.data);
                            }
                        });

                    } else {
                        console.log("error submit!!");
                        return false;
                    }
                });
            },
            register() {
                this.$refs["registerFrom"].validate((valid) => {
                    if (valid) {
                        if (!this.agree) {
                            this.$message.warning("请先阅读并接受协议");
                            return false;
                        }
                        if (!this.registerFrom.code) {
                            this.$message.error("请输入验证码");
                            return false;
                        }
                        CheckPhoneCode({
                            receive: this.registerFrom.phone,
                            code: this.registerFrom.code,
                        }).then((res) => {
                            if (res.code == 0) {
                                UserReg(this.registerFrom).then((res) => {
                                    if (res.code == 0) {
                                        this.$message.success("注册成功");
                                        // setUserInfo(this.registerFrom);
                                        // this.$store.commit("setUser", this.registerFrom);


                                        //注册后直接登录
                                        Login(this.registerFrom).then((res) => {
                                            if (res.code == 0) {
                                                this.$message.success("登录成功");
                                                UserInfoDetail().then((res1) => {
                                                    setUserInfo(res1.data);
                                                    this.$store.commit("setUser", res1.data);
                                                    console.log('用户信息', res1.data)
                                                    setTimeout(() => {
                                                        window.location.reload();
                                                    }, 500);
                                                });
                                            } else {
                                                this.$message.error(res.data);
                                            }
                                        });


                                        // setTimeout(() => {
                                        //     window.location.reload();
                                        // }, 1000);


                                    } else {
                                        this.$message.error(res.data);
                                    }
                                });
                            } else {
                                this.$message.error(res.data);
                            }
                        });
                    } else {
                        console.log("error submit!!");
                        return false;
                    }
                });
            },
            resetForm() {
                if (this.$refs["registerFrom"]) {
                    this.$refs["registerFrom"].resetFields();
                }
                if (this.$refs["form"]) {
                    this.$refs["form"].resetFields();
                }
            },
            findPass() {
                this.FindpassWord = true
            },
            changePassword() {

                if (this.findPassForm.newpass != this.findPassForm.newpassconfirm) {
                    this.$message.error('两次输入密码不一致')
                    return
                } else {

                    ResetPassword({
                        Phone: this.findPassCheckForm.phone,
                        Password: this.findPassForm.newpassconfirm,
                    }).then(res => {

                        if (res.code == 0) {
                            this.$message.success('修改成功')
                            setTimeout(() => {
                                window.location.reload()
                            }, 500)
                        } else {
                            this.$message.error(res.data)
                        }

                    })

                }

            },
        },
    };
</script>
<style lang="scss" scoped>
    .loginWaip {
        overflow: hidden;

        ::v-deep {
            .el-dialog__body {
                padding: 0;
            }

            .el-button--loginBtn {
                background: #e5e5e5;

                &:hover {
                    color: #a0a0a0;
                    border-color: #e5e5e5;
                }
            }

            .el-button--submit {
                background: #2eb0c6;
            }
        }

        .title {
            font-size: 20px;
            font-weight: bold;
            color: #111111;
            text-align: center;
        }

        .tips {
            color: #999999;
            font-size: 12px;
            text-align: center;
        }

        .formWaip {
            width: 70%;
            margin: 0 auto;
        }

        .reBtn {
            display: flex;
            align-items: center;
            justify-content: center;
            padding-bottom: 20px;
            font-size: 12px;

            span {
                display: block;
                cursor: pointer;
            }
        }

        .disflex {
            ::v-deep {
                .el-form-item__content {
                    display: flex;

                    button {
                        width: 130px !important;
                        margin-left: 20px;
                        padding: 12px 0 !important;
                        font-size: 14px;
                        color: #fff;
                    }
                }
            }
        }

        .consent {
            color: #999;

            .el-form-item__content {
                display: flex;
                text-align: center;
                line-height: 24px;
            }

            a {
                color: #666;
                text-decoration: none;
            }

            .el-checkbox {
                height: auto;
                margin-right: 5px;
            }
        }
    }
</style>
